<!-- BEGIN: ACCORDION DEMO -->
<div class="toolbar">
    <div class="page-bar">
        <ul class="page-breadcrumb float-right">
            <li>
                <i class="fa fa-home"></i>
                <a [routerLink]="['/index/home']">管理中心</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a [routerLink]="['/index/styles']">风格模板管理</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a href="javascript:;">{{appServ.pageTitle}}</a>
            </li>
        </ul>
        <h1 class="page-title"> <i class="icon-note font-green-sharp"></i> {{appServ.pageTitle}}</h1>
    </div>
</div>

<div class="dataform">
    <form class="form-horizontal" name="editForm" #editForm="ngForm" role="form" novalidate>
        <input type="hidden" ng-model="dataInfo.Id">
        <div class="form-body">
            <div class="form-group row">
                <label for="StyleName" class="col-2 col-form-label">风格名称:</label>
                <div class="col-10">
                    <input type="text" [(ngModel)]="dataInfo.StyleName" name="StyleName" minlength="2" maxlength="100" class="form-control" placeholder="风格名称" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="Folder" class="col-2 col-form-label">保存文件夹:</label>
                <div class="col-10" *ngIf="dataInfo.Id==0">
                    <input type="text" #Folder="ngModel" pattern="^([a-zA-Z0-9_-])+$" [(ngModel)]="dataInfo.Folder" name="Folder" minlength="2" maxlength="100" class="form-control" placeholder="保存文件夹" required>
                    <div class="alert alert-danger mg-t-10" *ngIf="!Folder?.valid&&!Folder?.pristine">
                        请使用字母和数字
                    </div>
                </div>
                <div class="col-10" *ngIf="dataInfo.Id>0">
                    <div class="form-control">
                        {{dataInfo.Folder}}
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-2 col-form-label">描述:</label>
                <div class="col-10">
                    <textarea name="Descrip" maxlength="255" id="Descrip" [(ngModel)]="dataInfo.Descrip" placeholder="描述" class="form-control" rows="3"></textarea>
                </div>
            </div>

        </div>
        <div class="form-actions">
            <hr/>
            <div class="row">
                <div class="col-md-12 text-center">
                    <button class="btn green" (click)="dataSave()" [disabled]="!editForm.form.valid"> <span class="fa fa-save"></span> 保存</button>
                </div>
            </div>
        </div>
    </form>

</div>